<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
    <link rel="stylesheet" href="./css/news.css">
</head>
<div id='root'>
    <button @click='startFind'> 开始搜索</button>
    <div v-if='showFind'>
        <div class="inputK">
            <input type="text" v-model.trim='setValues' v-focus @keyup.ctrl.enter='showTips'>
            <button @click='showTips'>搜索</button>
            <ol v-if="canShow">
                <li v-for=" item in showArr" @click='setInputValue(item)'>{{item}}</li>

            </ol>
        </div>
        <template>
            <ul>
                <li v-for=" item in ulData">{{item}}</li>
              
            </ul>
        </template>
    </div>

</div>
<a href="./addNews.html">添加新闻</a>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>

<body>
    <script src="./js/vue.js"></script>
    <script>
        var arr = ["1升等于多少斤",
            "1公顷等于多少平方米",
            "1吨等于多少千克",
            "192.168.1.1 登陆入口",
            "10月份是什么星座",
            "10016是什么电话",
            "1688黄页网",
            "12345是什么电话",
            "10085是什么电话服务",
            "192.168.1.1手机登录"
        ]
        const vm = new Vue({
            el: "#root",
            data: {
                setValues: '',
                arrlist: [],
                ulData: [],
                showArr: [],
                showFind: false,
                canShow: false,
                timerIn: null
            },
            directives: {
                focus: {
                    inserted(ele, binds) {
                        ele.focus()
                    }
                }
            },
            watch: {
                setValues(newValue, oldValue) {
                    this.showArr = [];
                    // str.search(regexp)
                    let url = 'http://127.0.0.1:8080/findList'
                    axios.get(url).then(res => {
                        let arr = []
                        res.forEach((v, k) => {
                            arr.push(v.news)
                        })
                        this.arrlist = arr

                    })

                    // console.log(this.arrlist, 'asd')
                    //校验数组中是否存在
                    this.arrlist.forEach((v, k) => {
                        if (v.search(this.setValues) >= 0 && this.setValues != '') {
                            this.showArr.push(v)
                        }
                    })

                    //是否展示搜索内容(input失去焦点)
                    if (this.showArr.length) {
                        this.canShow = true;
                    } else {
                        this.canShow = false
                    }
                },

            },
            methods: {
                // 点击开始
                startFind() {
                    let url = 'http://127.0.0.1:8080/findList'

                    this.timerIn = setInterval(() => {
                            axios.get(url).then(res => {
                                let arr = []
                                res.forEach((v, k) => {
                                    arr.push(v.news)
                                })
                                this.arrlist = arr
                                    // console.log(this.arrlist, 'asd')
                            })
                        },
                        3000)
                    let arr = JSON.parse(window.localStorage.getItem('uldataList'));
                    if (arr) {
                        this.ulData = arr;
                    } else {
                        this.ulData = [];
                    }

                    //现实与隐藏搜索
                    if (this.showFind) {
                        this.showFind = false
                    } else {
                        this.showFind = true
                    }

                    this.setValues = ""
                    this.canShow = false
                },

                updated() {

                },

                // 显示提示
                showTips() {
                    if (this.setValues == '') {
                        window.confirm('内容不能为空')
                        return;
                    }
                    let arr = JSON.parse(window.localStorage.getItem('uldataList'));
                    let arr1 = [];
                    if (arr) {

                        if (arr.length < 5) {
                            arr.unshift(this.setValues);
                        } else {
                            arr.pop()
                            arr.unshift(this.setValues);
                        }
                        arr1 = arr
                        window.localStorage.setItem('uldataList', JSON.stringify(arr1))
                        this.ulData = arr1;
                    } else {
                        arr1.unshift(this.setValues);
                        window.localStorage.setItem('uldataList', JSON.stringify(arr1))
                        this.ulData = arr1
                    }
                    this.setValues = ""
                    this.canShow = false
                    window.confirm(`您的搜索内容已找到，快去看看吧。`)

                },
                // 设置输入值
                setInputValue(val) {
                    // this.canShow = false
                    this.setValues = val
                }
            },
            berforeDestroy() {
                clearInterval(this.timerIn)
            }

        })
    </script>
</body>

</html>